<template>
  <div style="display: inline-block;">
    <el-button type="primary" icon="time" @click="showDialog" :disabled="list.length>0 && list[0].startTime > 0">设置开标日期</el-button>
    <el-dialog title="设置开标时间" :visible.sync="dialogFormVisible">
      <el-form
        v-bind="getFormProps({labelWidth:'150px'})"
        ref="form"
        :model="form"
        class="train-form">
        <el-row>
          <el-form-item
            :label="item.rightsName + '开标：'"
            :prop="`list.${index}.startTime`"
            :rules="[{ required: true, message: '开标时间不能为空'}]"
            v-for="(item, index) in form.list" :key="index">
            <el-date-picker
              v-model="item.startTime"
              type="date"
              placeholder="选择开标时间"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="bidsettimeinfo">
        * 开标时间设定后无法修改
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" native-type="submit" :loading="loading" @click="submit">确定提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {form} from 'utils/mixins' // 引入form mixin
  import api from 'api/merchants'
  // import api from 'api/sponsor'
  export default{
    mixins: [form],
    props: {
      list: Array,
      merId: {},
      merEndTime: {}
    },
    data () {
      let that = this
      return {
        dialogFormVisible: false,
        loading: false,
        form: {
          list: []
        },
        pickerOptions: {
          disabledDate (time) {
            return (time.getTime() < Date.now() - 8.64e7) || (time.getTime() > that.merEndTime)
          }
        }
      }
    },
    methods: {
      showDialog () {
        this.form.list = JSON.parse(JSON.stringify(this.list))
        this.dialogFormVisible = true
      },
      submit () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let thisdata = []
            this.form.list.forEach(item => {
              thisdata.push({
                startTime: Date.parse(item.startTime),
                rightsId: item.id
              })
            })
            this.$confirm('确定设置开标时间，设置后无法修改？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              api.bid_startTime(JSON.stringify({list: thisdata, merId: this.merId}), {context: this, successMsg: ' 设置开标时间成功！'}).then((json) => {
                this.dialogFormVisible = false
                this.$emit('update:list', this.form.list)
              })
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  
  .bidsettimeinfo{
    color: $color-error;
    margin-top: 10px;
    text-align: center;
  }
  .title{
    display: table;
    text-align: right;
    height: 50px;
    padding-right: 10px;
    padding-left: 10px;
    span{
      display: table-cell;
      vertical-align: middle;
    }
  }
  .timeinput{
    margin-top: 7px;
    height: 50px;
  }
  .settime-box{
    .el-form-item__content > .el-input, .el-form-item__content > .el-cascader, .el-form-item__content > .el-select{
      width: 100%;
    }
  }
</style>
